<template>
  <view class="container">
    <view class="tui-cmt-primary">
      <view class="tui-cmt-cell tui-cell-last tui-cmt-cell1">
        <view class="tui-header-box">
          <view class="tui-userinfo-box">
            <image :src="comment.avatar" class="tui-avatar" mode="widthFix"></image>
            <view class="tui-nickname-box">
              <view class="tui-cmt-nickname">{{comment.nickname}}</view>
              <view class="tui-cmt-time">{{$util.dateUtils.format(comment.createTime)}}</view>
            </view>
          </view>

          <view class="tui-fabulous" @tap="onLiked(comment,true)">
            <text>{{ comment.likes == 0 ? '赞' : comment.likes }}</text>
            <image v-if="!comment.isLiked" src="/static/goods.png" mode="widthFix"></image>
            <image v-else src="/static/goods_active.png" mode="widthFix"></image>
          </view>
        </view>
        <view class="tui-cmt-content">{{comment.content}}</view>
      </view>
    </view>
    <view class="tui-empty"></view>
    <view class="tui-cmt-title">全部回复（{{comment.replies}}）</view>
    <view class="tui-cmtbox">
      <view class="tui-cmt-cell" v-for="(item, index) in reviewList" :key="index">
        <view class="tui-header-box">

          <view class="tui-userinfo-box">
            <image :src="item.avatar" class="tui-avatar"
              @click="navigateTo('/subpkg/userInfo/userInfo?id=' + item.userId)"></image>
            <view class="tui-nickname-box" @tap="articleShowInput(item)">
              <view class="tui-cmt-nickname">{{ item.nickname }}</view>
              <view class="tui-cmt-time">
                {{$util.dateUtils.format(item.createTime)}}
                <text style="margin: 0 12rpx;">·</text>
                回复
              </view>
            </view>
          </view>

          <view class="tui-fabulous" :class="[item.isLiked ? 'tui-primary' : '']" :id="index"
            @tap="onLiked(item,false)">
            <text>{{ item.likes == 0 ? '赞' : item.likes }}</text>
            <image v-if="!item.isLiked" src="/static/goods.png" mode="widthFix"></image>
            <image v-else src="/static/goods_active.png" mode="widthFix"></image>
          </view>
        </view>
        <view v-if="item.isReply == 0" class="tui-cmt-content" @tap="articleShowInput(item)">{{ item.content }}</view>
        <view v-if="item.isReply == 1" class="tui-cmt-content">回复 <text
            style="color: rgba(61,61,61,0.5);margin: 0 10rpx;"
            @click="navigateTo('/subpkg/userInfo/userInfo?id=' + item.replyUserId)">{{item.replyUserNickname}}</text> :
          {{ item.content }}</view>
      </view>
    </view>

    <view class="tui-operation" v-show="!articleShow">
      <!--处理iphonex xr 等手机底部兼容-->
      <view class="tui-operation-inner">
        <view class="tui-btn-comment" @tap="articleShowInput(comment)">回复楼主...</view>
      </view>
    </view>

    <!--加载loadding-->
    <tui-loadmore v-if="loadding" :index="3" type="primary"></tui-loadmore>
    <tui-nomore v-if="!pullUpOn" backgroundColor="#fff" text="没有更多回复"></tui-nomore>
    <!--加载loadding-->
    <view class="tui-safearea-bottom"></view>

    <!-- 回复文章框 -->
    <van-popup :show="articleShow" position="bottom" custom-style="height: 25%" @close="articleShowClose">
      <view class="reply_Input">
        <textarea class="reply_l" maxlength="50"
          :model:value="'回复  ' + articlecontentnickName + '  : ' + articlecontent" @input="contentInput">
        </textarea>
        <view class="send" @click="addsubmitText">
          发送
        </view>
      </view>
      <view class="img_and">
        <image src="/static/picture.png" class="minImage" mode="widthFix"></image>
        <image src="/static/invite.png" mode="widthFix"></image>
      </view>
    </van-popup>
  </view>
</template>

<script>
  import {
    getCommentDetail,
    getReplyList,
    commentSubmit
  } from "@/api/article.js"
  import {
    getattention,
    getLikeed
  } from '@/api/community.js'
  import {
    mapGetters
  } from "vuex";
  export default {
    data() {
      return {
        fabulous: 173,
        isFabulous: false,

        loadding: false,
        pullUpOn: true,

        commentId: 0,
        comment: [],
        reviewList: [],
        current: 1,
        size: 20,
        total: 0,
        sort: 0,

        // 
        articleShow: false,
        articlecontentnickName: '',
        articlecontent: '',
        // 点击回复的数据
        articleShowPitch: {}
      };
    },

    onLoad(options) {
      this.commentId = options.id;
      this.initData();
    },

    computed: {
      ...mapGetters('m_user', ['isLogin'])
    },
    watch: {
      isLogin: {
        handler: function(newV, oldV) {
          if (newV == true) {
            this.current = 1;
            this.total = 0;
            this.sort = 0;
            this.reviewList = [];
            // 初始化数据
            this.initData();
          }
        },
        deep: true
      }
    },
    methods: {
      initData() {
        getCommentDetail(this.commentId).then(res => {
          // if (res.data.sliderImgs) {
          // 	res.data.sliderImgs = res.data.sliderImgs.split(',')
          // }
          this.comment = res.data
        })
        this.getComents()
      },
      // 获取评论下的回复
      getComents() {
        let that = this;
        getReplyList(that.commentId, that.sort, that.current).then(res => {
          // console.log(res)
          if (that.current === 1) {
            that.size = res.data.size;
            that.total = res.data.total;
          }

          if (res.data.records) {
            that.reviewList = [...that.reviewList, ...res.data.records];
          }
        })
      },
      onLiked(data, LikeShow) {
        // console.log(data)
        //0 动态 1 文章 2 点评 4 评论
        getLikeed({
          associatedId: data.id,
          associatedType: 4,
		  associatedUserId:data.userId
        }).then(res => {
          if (LikeShow) {
            this.comment.isLiked = !this.comment.isLiked
            if (this.comment.isLiked) {
              this.comment.likes++;
            } else {
              this.comment.likes--;
            }
          } else {
            this.reviewList.forEach((item) => {
              if (item.id === data.id) {
                item.isLiked = !data.isLiked
                if (item.isLiked) {
                  item.likes++;
                } else {
                  item.likes--;
                }
              }
            });
          }
        });
      },
      // 导航
      navigateTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      btnFabulous: function() {
        this.fabulous = this.isFabulous ? 173 : 174;
        this.isFabulous = !this.isFabulous;
      },
      cmtFabulous: function(e) {
        let index = e.currentTarget.id;
        let fabulousObj = this.replyList[index];
        let isFabulous = this.replyList[index].isFabulous;
        let fabulous = this.replyList[index].fabulous;
        let fabulousNum = isFabulous ? fabulous - 1 : fabulous + 1;
        this.$set(fabulousObj, 'fabulous', fabulousNum);
        this.$set(fabulousObj, 'isFabulous', !isFabulous);
      },
      articleShowInput(comment) {
        this.articleShow = true
        this.articlecontentnickName = comment.nickname
        this.articleShowPitch = comment
      },
      articleShowClose() {
        this.articleShow = false
      },
      contentInput(e) {
        // console.log(e.detail.value.splice(1, this.articleShowPitch.nickname.length + 5))
        // console.log(e)
        const nameItem = e.detail.value
        // console.log(nameItem.substr(this.articleShowPitch.nickname.length + 8))
        this.articlecontent = nameItem.substr(this.articleShowPitch.nickname.length + 8)
        // console.log(this.articlecontent.splice(1, this.articleShowPitch.nickname.length + 5))
      },
      // 文章发送
      addsubmitText() {
        const comment = {
          associatedType: 1,
          associatedId: this.articleShowPitch.id,
          content: this.articlecontent
        }

        commentSubmit(comment).then(res => {
          // console,log(res)
          this.articlecontent = ''
          this.articleShow = false
          this.current = 1;
          this.total = 0;
          this.sort = 0;
          this.reviewList = [];
          this.getComents()
        })
      }
    },
    //页面相关事件处理函数--监听用户下拉动作
    onPullDownRefresh: function() {
      this.current = 1;
      this.pullUpOn = true;
      this.loadding = false;
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 200);
    },
    // 页面上拉触底事件的处理函数
    onReachBottom: function() {
      if (!this.pullUpOn) return;
      this.loadding = true;
      if (this.current * this.size >= this.total) {
        this.loadding = false;
        this.pullUpOn = false;
      } else {
        this.current++;
        this.getComents();
        this.loadding = false;
      }
    }
  };
</script>

<style lang="scss">
  page {
    background-color: #fff;
    color: #333;
  }

  .container {
    padding-bottom: 126rpx;
    box-sizing: border-box;
  }

  .tui-empty {
    width: 100%;
    height: 10rpx;
    background-color: #f5f5f5;
  }

  .tui-cmt-title {
    font-size: 30rpx;
    font-weight: bold;
    position: relative;
    padding: 40rpx 30rpx 0rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
  }


  .tui-cmt-cell {
    width: 100%;
    padding: 45rpx 30rpx;
    box-sizing: border-box;
    position: relative;
  }

  .tui-cmt-cell1 {
    padding-bottom: 40rpx;
  }

  .tui-cmt-cell::after {
    content: '';
    position: absolute;
    border-bottom: 1rpx solid #f1f1f1;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    bottom: 0;
    right: 0;
    left: 0;
  }

  .tui-cell-last::after {
    border-bottom: 0 !important;
  }

  .tui-header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
  }

  .tui-userinfo-box {
    display: flex;
    align-items: center;
  }

  .tui-avatar {
    width: 64rpx;
    height: 64rpx;
    border-radius: 32rpx;
    display: block;
    flex-shrink: 0;
  }

  .tui-nickname-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 12rpx;
    padding-top: 4rpx;
    height: 60rpx;
  }

  .tui-cmt-nickname {
    color: #3d3d3d;
    line-height: 28rpx;
  }

  .tui-cmt-time {
    font-size: 24rpx;
    line-height: 24rpx;
    color: #9a9a9a;
    transform: scale(0.8);
    transform-origin: 0 100%;
  }

  .tui-fabulous {
    color: #9a9a9a;
    display: flex;
    align-items: center;

    image {
      width: 30rpx;
      height: 30rpx;
      margin-left: 10rpx;
    }
  }

  .tui-fabulous text {
    padding-right: 4rpx;
    font-size: 24rpx;
  }

  .tui-cmt-content {
    font-size: 32rpx;
    color: #333;
    text-align: justify;
    padding-top: 20rpx;
    word-break: break-all;
    word-wrap: break-word;
  }

  .tui-reply-box {
    border-radius: 8rpx;
    overflow: hidden;
    margin-top: 16rpx;
  }

  .tui-cell-class {
    flex-direction: column;
    justify-content: flex-start !important;
    padding: 20rpx !important;
    text-align: justify;
    word-break: break-all;
    word-wrap: break-word;
  }

  .tui-flex-1 {
    flex: 1;
    width: 100%;
  }

  .tui-reply-nickname {
    font-size: 24rpx;
    color: #7a7a7a;
    padding-bottom: 8rpx;
  }

  .tui-operation {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99999;
  }

  .tui-operation-inner {
    height: 128rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tui-safearea-bottom {
    width: 100%;
    height: env(safe-area-inset-bottom);
  }

  .tui-operation::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-top: 1rpx solid #eaeef1;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .tui-btn-comment {
    height: 82rpx;
    width: 100%;
    background: #f5f5f5;
    color: #999;
    border-radius: 68rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    padding-left: 40rpx;
    box-sizing: border-box;
    padding-top: 0;
  }

  /deep/ .reply_Input {
    padding-top: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .send {
      margin-left: 20rpx;
      font-size: 28rpx;
      color: rgba(61, 61, 61, .5);
    }
  }

  .img_and {
    display: flex;
    justify-content: flex-end;
    margin-top: 24rpx;
    padding-right: 105rpx;

    image {
      width: 38rpx;
      height: 38rpx;
      // padding-left: 80rpx;
    }

    .minImage {
      margin-right: 65rpx;
    }
  }

  /deep/ .reply_l {
    width: 600rpx;
    height: 160rpx;
    border-radius: 10rpx;
    padding-top: 18rpx;
    padding-left: 26rpx;
    background-color: rgb(245, 245, 245);
    font-size: 28rpx;
    color: rgba(61, 61, 61, .5);
  }
</style>
